<script lang='ts' setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter  } from 'vue-router'
import { getLibraryList } from '@/api/home'
import  { baseURL } from '@/utils/config'
let dataList:any = reactive({library:[]})
let title:any = ref('')
const getData = () => {
  let route = useRoute()
  // 页面标题
  title = route.params.title
  // 请求产品
  getLibraryList({pageNum:1, pageSize: 10, classifyId:route.params.id }).then((res:any) => {
    dataList.library = res.rows
  })
}
getData()
</script>

<template>
  <div class='classify'>
    <div class="classify-title">
      <h2>{{title}}</h2>
    </div>
    <!-- <img style="width: 100%;" :src="dataList.library[0].cover" alt="" srcset=""> -->
    <div class="classify-wrap">
      <van-grid :gutter="5" column-num="3" :border="false">
        <van-grid-item v-for="value,k in dataList.library" :key="k" icon="photo-o"  :to="`/h5/details/${value.title}/${value.libraryId}`">
          <van-image :src="baseURL()+value?.cover"/>
          <div style="font-size: 12px;padding: 5px 0px 0px 0px;">{{ value?.title }}</div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.classify{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow: scroll;
  .classify-title{
    width: 100%;
    text-align: center;
    color:#fff;
    background-color: #050f2d;
  }
  .classify-wrap{
    padding: 10px 0px;
    
  }
}
</style>